<template>
	<el-card class="index_content" shadow="never">
		<template slot="header" v-if="!!title">
			<h2>{{ title }}</h2>
			<div class="button" v-if="!!$slots.button">
				<slot name="button"></slot>
			</div>
		</template>
		<slot name="content"></slot>
		<slot></slot>
	</el-card>
</template>

<script>
export default {
	props: {
		title: String
	}
};
</script>

<style lang="scss" scoped>
.index_content ::v-deep {
	display: flex;
	flex-direction: column;
	height: calc(100% - 16px);
	border: none;
	margin-bottom: 16px;
	.el-card__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		padding: 15px;
		border-bottom: none;
		h2 {
			font-size: 16px;
		}
		a {
			color: var(--primary);
			text-decoration: none;
			&:hover {
				color: var(--primary-hover);
			}
		}
		.el-button {
			padding: 0;
			// text-decoration: underline;
		}
	}
	.el-card__body {
		padding: 0;
		flex: 1;
		overflow: hidden;
	}
}
</style>
